<template>
    <!--  整体布局-->
    <el-container class="home_container">
        <!--  头部区域-->
        <el-header>
            <div>
                <span>人事管理系统</span>
            </div>
            <div>
                <el-button type="text" v-show="isLogin">{{$store.state.currentUser}}</el-button>
                <el-button type="info" @click="exit">退出</el-button>
            </div>

        </el-header>
        <el-container>
            <!--        左侧边栏区域-->
            <el-aside width="200px">
                <!--          菜单栏导航-->
                <el-menu background-color="#333744" text-color="#fff"
                         active-text-color="#ffd04b"
                         router >
                    <!--                    个人中心选项-->
                    <el-menu-item index="/manage/user">
                        <i class="el-icon-setting"></i>
                        <span slot="title">个人中心</span>
                    </el-menu-item>
                    <!--                    员工信息管理选项-->
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-check"></i>
                            <span>员工信息管理</span>
                        </template>
                        <el-menu-item index="/manage/info_staff">员工信息</el-menu-item>
                        <el-menu-item index="/manage/train">员工培训信息</el-menu-item>
                        <el-menu-item index="/manage/attendance">考勤信息</el-menu-item>
                        <el-menu-item index="/manage/salary_change">薪水变更记录</el-menu-item>

                    </el-submenu>
                    <!--                   公司岗位管理选项 -->
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-grid"></i>
                            <span>公司岗位管理</span>
                        </template>
                        <el-menu-item index="/manage/post">公司部门</el-menu-item>
                        <el-submenu >
                            <template slot="title">公司岗位信息</template>
                            <el-menu-item index="/manage/station">公司岗位</el-menu-item>
                            <el-menu-item index="/manage/station_change">岗位变更记录</el-menu-item>
                        </el-submenu>

                    </el-submenu>
                    <!--                    公司部门工作选项-->
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-message"></i>
                            <span>部门工作管理</span>
                        </template>
                        <el-menu-item index="/manage/work">部门工作</el-menu-item>
                    </el-submenu>
                    <!--                    权限管理设置-->
                    <el-menu-item index="/manage/access_control">
                        <i class="el-icon-more"></i>
                        <span slot="title">主管权限管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!--        主体区域，路由占位符-->
            <el-main>
                <router-view>
                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        methods: {
            exit() {
                //清空sessionstorage
                sessionStorage.setItem('userName',null)
                sessionStorage.setItem('userToken',null)
                //    重置vuex
                this.$store.dispatch('setUser',null)
                this.$store.dispatch('setToken',null)
                //    跳转到登录页面
                this.$router.push('/login')
                //    提示
                this.$message({
                    message: '成功退出登录',
                    type: 'success'
                })

            }
        },
        computed: {
            isLogin() {
                if (sessionStorage.getItem('userName')&&sessionStorage.getItem('userToken')) {
                    this.$store.commit('userStatus',sessionStorage.getItem('userName'))
                    this.$store.commit('userToken',sessionStorage.getItem('userToken'))
                } else {
                    this.$store.commit('userStatus',null)
                    this.$store.commit('userToken', '')
                }
                return this.$store.getters.isLogin
            }

        }
    }
</script>

<style lang="less" scoped>
    .home_container{
        height: 100%;
    }
    .el-header{
        background-color: #373d41;
        display: flex;
        justify-content: space-between;
        color:#ffffff;
        font-size: 20px;
        align-items: center;
        >div{
            display: flex;
            align-items:center ;
        }
    }
    .el-aside{
        background-color: #333744;
    }
    .el-main{
        background-color: #eaedf1;
    }
</style>
